<!--校内时间段管理查看-->
<template>
  <div class="log">
    <basic-container>
      <el-row :span="24">
        <!--左侧-->
        <el-col :span="15">
          <!--时间组区域-->
          <el-button type="primary" @click="dictItemVisible()" style="margin-left: 20px">返回</el-button>
          <el-form v-model="editform" style="padding-left: 20px">
            <h3 style="display: inline-block">时间组</h3>
            <p style="display: inline-block;margin:10px 20px 0 54px;">该时间组绑定人数：<span style="font-weight: bold">{{this.getPlanCount}}人</span></p>
            <el-button type="warning" @click.native="inSeeDetails">点击查看</el-button>
            <el-form-item label="时间组名称" prop="timePlanName">
              <el-input v-model="editform.timePlanName" disabled style="width: 55%;margin-left: 28px"></el-input>
            </el-form-item>
            <el-form-item label="时间组生效日期" prop="validTime">
              <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy 年 MM 月 dd 日"
                  disabled
                  :clearable="false"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 55%">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="时间状态" prop="states">
              <el-radio v-model="editform.states" :label="0" :value="0" disabled style="margin-left: 44px">正常</el-radio>
              <el-radio v-model="editform.states" :label="1" :value="1" disabled>停用</el-radio>
            </el-form-item>
            <el-form-item label="高三级时间组" prop="isThirdGrade">
              <el-radio v-model="editform.isThirdGrade" :label="0" :value="0" disabled style="margin-left: 14px">是</el-radio>
              <el-radio v-model="editform.isThirdGrade" :label="1" :value="1" disabled>否</el-radio>
            </el-form-item>
          </el-form>
          <!--已选时间段区域-->
          <h3 style="margin-left: 16px">已选时间段</h3>
          <avue-crud
              ref="crud"
              :data="SelectedData"
              :option="SelectedOption"
              @on-load="getListSelect"
              @row-del="handleDel">
            <template slot="timerange" slot-scope="scope">
              {{ scope.row.timeFrameStart.substr(0,5) }}-{{ scope.row.timeFrameEnd.substr(0,5) }}
            </template>
            <template slot="weeks" slot-scope="scope">

              <el-checkbox-group v-model="scope.row.weeks" disabled>
                <el-checkbox-button label="1" value="周一">周一</el-checkbox-button>
                <el-checkbox-button label="2" value="周二">周二</el-checkbox-button>
                <el-checkbox-button label="3" value="周三">周三</el-checkbox-button>
                <el-checkbox-button label="4" value="周四">周四</el-checkbox-button>
                <el-checkbox-button label="5" value="周五">周五</el-checkbox-button>
                <el-checkbox-button label="6" value="周六">周六</el-checkbox-button>
                <el-checkbox-button label="7" value="周日">周日</el-checkbox-button>
              </el-checkbox-group>
            </template>
            <template slot="directions" slot-scope="scope">
              <el-checkbox-group v-model="scope.row.directions" disabled class="direction">
                <el-checkbox-button label="0" value="进">进</el-checkbox-button>
                <el-checkbox-button label="1" value="出">出</el-checkbox-button>
              </el-checkbox-group>
            </template>
            <template slot="menu" slot-scope="scope">
              <el-button
                  class="filter-item"
                  size="mini"
                  type="danger"
                  disabled
                  @click="handleDel(scope.row)">删除
              </el-button>
            </template>
          </avue-crud>
          <!--绑定优先特殊时间段区域-->
          <el-form v-model="editform" style="padding-left: 20px">
            <h3 style="color: #000;">绑定优先特殊时间</h3>
            <p style="font-size: 14px;color: red;margin: 10px 0">此项为非必填项,特殊时间通行优先级大于时间组别内通行权限,且仅可设置一个</p>
            <el-form-item label="生效日期" prop="validTime">
              <el-date-picker
                  v-model="beforedateRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  disabled
                  style="width: 55%;margin-left: 40px">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="时间范围" prop="timeRange">
              <el-time-picker
                  v-model="beforetimeRange"
                  end-placeholder="结束时间"
                  format="HH:mm"
                  is-range
                  placeholder="选择时间范围"
                  range-separator="-"
                  start-placeholder="开始时间"
                  disabled
                  :clearable="false"
                  value-format="HH:mm:ss"
                  style="width: 55%;margin-left: 40px">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="通行方向" prop="beforeDirections">
              <el-checkbox-group v-model="beforeDirections">
                <el-checkbox style="margin-left: 40px" disabled label="0">进</el-checkbox>
                <el-checkbox disabled label="1">出</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-col>
        <!--右侧-->
        <!--所有时间段-->
        <el-col :span="8" style="float: right">
          <avue-crud
              ref="crud"
              :data="tableData"
              :option="tableOption"
              @on-load="getList">
            <template slot="timerange" slot-scope="scope">
              {{ scope.row.timeFrameStart.substr(0, 5) }}-{{ scope.row.timeFrameEnd.substr(0, 5) }}
            </template>
            <template slot="status" slot-scope="scope">
              <el-tag v-if="scope.row.status === 0">正常</el-tag>
              <el-tag v-if="scope.row.status === 1" type="danger">停用</el-tag>
            </template>
            <template slot="menu" slot-scope="scope">
              <el-button v-if="scope.row.flag === true" class="filter-item" disabled size="mini" type="primary"
                         @click="choice(scope.row)">选择
              </el-button>
              <el-button v-else-if="scope.row.flag === false" disabled size="mini" type="primary">已选</el-button>
            </template>
          </avue-crud>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import {timeFrame} from '@/api/pass/timeframe'
import {timeEdit, timeplanObj} from '@/api/pass/time-edit'
import {timegroupObj} from '@/api/pass/s-newtimegroup'

export default {
  name: 'inTime-see',
  data() {
    return {
      timeRange: '',
      dateRange: '',
      beforedateRange: '',
      beforetimeRange: '',
      directions: [],
      beforeDirections: [],
      tableData: [],
      SelectedData: [],
      tableLoading: false,
      getPlanCount:'',
      editform: {
        timePlanName: '',
        timerange: '',
        states: '',
        isThirdGrade: '',
        validTimeStart: '',
        validTimeEnd: '',
        beforeDateStart: '',
        beforeDateEnd: ''
      },
      SelectedOption: {  //已选时间段
        border:true,
        menuAlign: 'center',
        menuType: 'button',
        align: 'center',
        menuWidth:80,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        maxHeight: 285,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '时间段名',
            prop:'timeName',
          },
          {
            label: '时间范围',
            prop: 'timerange',
            slot: true,
          },
          {
            label: '生效日',
            prop: 'weeks',
            width: 415,
            slot: true,
          },
          {
            label: '进出属性',
            prop: 'directions',
            width: 110,
            slot: true,
          }
        ]
      },
      tableOption: {  //所有时间段
        border:true,
        menuAlign: 'center',
        menuType: 'button',
        menuWidth:80,
        align: 'center',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        maxHeight: 730,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '时间段名',
            prop: 'timeName',
          },
          {
            label: '时间范围',
            prop: 'timerange',
            slot: true,
          },
          {
            label: '状态',
            prop: 'status',
            slot: true
          }
        ]
      }
    }
  },
  computed: {},
  mounted() {
    this.geteditList()
  },
  methods: {
    //点击查看跳转
    inSeeDetails() {
      const src = `/pass/inSeeDetails`
      this.$router.push({
        path: src,
        query: {id: this.$route.query.id,
          timePlanName: this.editform.timePlanName,}
      })
    },

    //获取时间组数据
    geteditList() {
      let param = this.$route.query;
      timeplanObj(param.id).then(res => {
        if (res.data.code === 0) {
          this.editform = res.data.data
          var datearr = []
          datearr.push(this.editform.validTimeStart, this.editform.validTimeEnd)
          this.dateRange = datearr
          //  获取特殊日期和时间
          if (this.editform.beforeDateStart !== null){
            var beforeDatearr = []
            beforeDatearr.push(this.editform.beforeDateStart, this.editform.beforeDateEnd)
            this.beforedateRange = beforeDatearr
            var beforeTimearr = []
            beforeTimearr.push(this.editform.beforeTimeStart, this.editform.beforeTimeEnd)
            this.beforetimeRange = beforeTimearr
            // console.log(this.dateRange)
            var beforeStr = this.editform.beforeDirection.toString()
            if (beforeStr === "2") {
              return this.beforeDirections = ["0", "1"]
            }
            this.beforeDirections = beforeStr.split("");
          }
        }
      })
      let id = {
        timePlanDormId: param.id
      }
      timegroupObj(id).then(res =>{
        if (res.data.code === 0) {
          this.getPlanCount = res.data.data.total
        }
      })
    },

    // 获取已选时间段数据
    getListSelect() {
      this.tableLoading = true
      let param = this.$route.query;
      let params = {
        timePlanId: param.id
      }
      timeEdit(params).then(res => {
        if (res.data.code === 0) {
          this.SelectedData = res.data.data
          console.log(this.SelectedData)
          this.SelectedData.map(item => {
            this.$set(item, 'flag')
            item.flag = false
            this.$set(item, 'id')
            item.id = item.timeFrameId
            this.$set(item, 'weeks')
            item.weeks = item.week.split(",")
            this.$set(item, 'directions')
            var str = item.direction.toString()
            if (str === "2") {
              return item.directions = ["0", "1"]
            }
            item.directions = str.split("");

            console.log(item.directions)
          })
          this.tableData.forEach(item => {
            this.SelectedData.forEach(selected => {
              if (item.id === selected.timeFrameId) {
                item.flag = false
              }
            })
          })
        }
        this.tableLoading = false
      })
    },

    //删除已选时间段
    handleDel: function (row) {
      let selectarr = this.SelectedData
      for (var i = 0; i < selectarr.length; i++) {
        if (selectarr[i].id === row.id) {
          selectarr.splice(i, 1);
          row.flag = true
        }
      }
    },

    //所有时间段数据
    getList(page, params) {
      timeFrame(Object.assign({
        descs: 'create_time',  //是否倒序
        size: 999
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.tableData.map(item => {
          this.$set(item, 'flag')
          item.flag = true
        })
        this.tableLoading = false
      })
    },

    //选择时间段
    choice: function (row) {
      this.SelectedData.push(row)
      this.SelectedData.map(item => {
        if (item.weeks === undefined || item.directions === undefined) {
          this.$set(item, 'weeks')
          this.$set(item, 'directions')
          item.weeks = []
          item.directions = []
        }
      })
      if (row.flag === true) {
        return row.flag = false
      }
      console.log(this.SelectedData)
    },

    //返回
    dictItemVisible: function () {
      this.$router.go(-1)
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

  }
}
</script>
<style scoped>
/deep/.avue-crud__menu{
  display: none;
}
.radio{
  margin-right: 12px;
  padding: 0;
}
/deep/.el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner {
  color: #FFFFFF;
  background-color: #a0cfff;
  border-color: #fff;
  -webkit-box-shadow: -1px 0 0 0 #fff;
  box-shadow: -1px 0 0 0 #fff;
}
/deep/.direction .el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner {
  color: #FFFFFF;
  background-color: #94d888c9;
  border-color: #fff;
  -webkit-box-shadow: -1px 0 0 0 #fff;
  box-shadow: -1px 0 0 0 #fff;
}
/deep/.el-checkbox-button .el-checkbox-button--small.is-focus{
  border-color: #fff;
}
/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 10px!important;
}
/deep/.avue-crud__pagination{
  display: none;
}
/deep/.el-card__body{
  padding: 15px;
}
/*/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner::after{*/
/*  background-color: #fff;*/
/*}*/
/*/deep/.el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner{*/
/*  background: none;*/
/*}*/
h3{
  margin: 10px 0;
}
</style>